<template>
  <div class="app-container">
    <el-button  @click="dialogVisible=true" type="warning" round icon="el-icon-circle-plus-outline">新增</el-button>
    <!-- 对话框 -->
    <el-dialog title="添加销售语言"  :visible.sync="dialogVisible" width="25%">
      <!-- 表单 -->
      <el-form :model="formData" :rules="formRules" ref="formRef" label-width="100px">
        <el-form-item label="语言名称：" prop="languageName">
          <el-input v-model="formData.languageName" style="width: 70%" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="唯一标识:" prop="code">
          <el-input v-model="formData.code" style="width: 70%" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <template>
            <el-select v-model="formData.status" style="width: 25%" placeholder="请选择">
              <el-option
                v-for="item in langvageList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
      </el-form>
      
      <!-- 对话框底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleAddCancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
    <br></br>

    
    <el-table
      v-loading="listLoading"
      :data="dataList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="语言名称">
        <template slot-scope="scope">
          {{ scope.row.languageName }}
        </template>
      </el-table-column>
      <el-table-column label="唯一标识">
        <template slot-scope="scope">
          {{ scope.row.code }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="创建日期" >
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="状态"  align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusStyleFilter">{{ scope.row.status | statusTextFilter }}</el-tag>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作" >
        <template slot-scope="scope">
          <el-button :type="scope.row.status | buttonStyleFilter" size="small" @click="changeStatus(scope.row)">
            {{ scope.row.status | buttonFilter }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { query, changeStatus, addLanguage } from '@/api/language'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {

  filters: {
    statusStyleFilter(status) {
      const statusMap = {
        1: 'success',
        2: 'info'
      }
      return statusMap[status] || 'danger'
    },
    statusTextFilter(status) {
      const map = {
        1: '已启用',
        0: '已停用'
      }
      return map[status] || '未知状态'
    },
    buttonFilter(status) {
      const map = {
        1: '停用',
        0: '启用'
      }
      return map[status] || '-'
    },
    buttonStyleFilter(status) {
      const map = {
        1: 'info',
        0: 'warning'
      }
      return map[status] || '-'
    }
  },
  data() {
    return {
      dataList:[],
      listLoading: true,
      dialogVisible: false, 
      formData: {
        languageName:'',          
        code: '',
        status:'1'
      },
      langvageList:[{value:'1',label:'启用'},{value:'0',label:'停用'}],
    
      formRules: {         
        languageName: [
          { required: true, message: '请输入语言名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入唯一标识', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.listLoading = true
    this.listLoading = false
    this.handleQuery()
  },
  methods: {
    // 新增
    submitForm() {
      addLanguage(this.formData).then(response => {
        this.handleReset()
        if (response.code === 200) {
          this.handleQuery()
          this.$message({
            message: '新增成功',
            type: 'success'
          })
          this.dialogVisible = false
          this.handleAddCancel()
        } else {
          this.$message({
            message: response.msg,
            type: 'error'
          })
        }
      })
    },
    // 查询
    handleQuery(){
      query().then(res => {
					console.log(res);
          console.log(res.data);
					this.dataList = res.data;
					
				}).catch(e => {
            console.log(e);
				});
      },
    // 条件重置
    handleReset(){
      this.queryParams = {
        goodsName: '',
        goodsContent: '',
        goodsStatus:'1',
        startDate: '',
        endDate: ''
      }
    },
    // 取消新增
    handleAddCancel() {
      this.formData = {          
        languageName: '',
        code: '',
        status: '1',
      };
      this.dialogVisible = false;
    },
    // 停用启用
    changeStatus(row) {
      // api调用
      changeStatus(row.id, row.status).then(res => {
        if (res.code === 200) {
          this.$message.success(`已${row.status === 1 ? '停用' : '启用'}`)
          // 切换状态
          row.status = row.status === 1 ? 0 : 1
        }
        if (res.code === 501) {
          this.$message.warning(`${res.msg}`);
         
        }
        
      }).catch(e => {
        console.log(e);
      });
    
    }
  }
}
</script>
<style scoped>
</style>